<template>
  <div>
    <OrderHeader title="支付订单">
      <template v-slot:tip>
          <span>支付订单</span>
      </template>
    </OrderHeader>
    <div class="orderPay">
      <div class="wrapper">
        <div class="container">
          <div class="order-wrap">
            <div class="item-order">
              <div class="icon-succ"></div>
              <div class="order-info">
                <h2>订单提交成功！去付款咯～</h2>
                <p>请在<span>30分</span>内完成支付, 超时后将取消订单</p>
                <p>收货信息：{{userInfo}} </p>
              </div>
              <div class="order-total">
                <p>应付总额：<span>{{total}}</span>元</p>
                <p>订单详情<em class="icon-down" :class="{'up':showDetail}" @click="showDetail=!showDetail"></em></p>
              </div>
            </div>
            <div class="item-detail" v-if="showDetail">
              <div class="item">
                <div class="detail-title">订单号：</div>
                <div class="detail-info theme-color">{{list.order_id}}</div>
              </div>
              <div class="item">
                <div class="detail-title">收货信息：</div>
                <div class="detail-info">{{userInfo}}</div>
              </div>
              <div class="item good">
                <div class="detail-title">商品名称：</div>
                <div class="detail-info">
                  <ul>
                    <li v-for="(item,index) in orderGoods" :key="index">
                      <img v-lazy="item.s_photos[0].path"/>{{item.goods_name}}
                    </li>
                  </ul>
                </div>
              </div>
              <div class="item">
                <div class="detail-title">发票信息：</div>
                <div class="detail-info">电子发票 个人</div>
              </div>
            </div>
          </div>
          <div class="item-pay">
            <h3>选择以下支付方式付款</h3>
            <div class="pay-way">
              <p>支付平台</p>
              <div class="pay pay-ali" :class="{'checked':payType==1}" @click="paySubmit(1)"></div>
              <div class="pay pay-wechat" :class="{'checked':payType==2}" @click="paySubmit(2)"></div>
            </div>
          </div>
          <div @click="toList">
            去订单列表
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderHeader from '../components/OrderHeader'
import http from '../assets/js/http'
import api from '../assets/js/api'
export default {
    components:{
      OrderHeader
    },
    data(){
      return {
        showDetail:false,     //显示
        payType:null,         
        list:{},              //订单信息
        total:null,           //总价
        userInfo:null,        //用户信息
        orderGoods:[]         //商品
      }
    },
    async created(){
      
      let id = this.$route.query.id
      console.log(id);
      this.total = this.$route.query.total
      let res = await http.get(api.order+`/${id}`)
      this.list = res
      this.orderGoods = res.goods_info
      this.userInfo = `${res.s_address.name} ${res.s_address.phone} ${res.s_address.area_name} ${res.s_address.desc}`
      // console.log(this.list);
      // console.log(this.orderGoods);
    },
    methods:{
      paySubmit(num){
        this.payType = num
      },
      toList(){
        this.$router.push('/order/orderList')
      }
    }
}
</script>

<style lang="scss" scoped>
.orderPay{
  width: 100%;
  background-color: #F5F5F5;
}
.wrapper{
  width: 90%;
  margin: 0 auto;
  background-color:#F5F5F5;
  padding-top:30px;
  padding-bottom:61px;
  .order-wrap{
    padding: 62px 50px;
    background-color: #fff;
    font-size:14px;
    margin-bottom:30px;
    .item-order{
      display: flex;
      align-items: center;
      .icon-succ{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background:url('/img/icon-gou.png') #80c58a no-repeat center;
        background-size:60px;
        margin-right:40px;
      }
      .order-info{
        margin-right: 248px;
        h2{
          font-size:24px;
          color:#333333;
          margin-bottom:20px;
        }
        p{
          color:#666666;
          span{
            color:#FF6700;
          }
        }
      }
      .order-total{
        &>p:first-child{
          margin-bottom:30px;
        }
        span{
          font-size:28px;
          color:#FF6700;
        }
        .icon-down{
          display:inline-block;
          width:14px;
          height:10px;
          background:url('/img/icon-down.png') no-repeat center;
          background-size:contain;
          margin-left:9px;
          transition:all .5s;
          cursor:pointer;
          &.up{
            transform: rotate(180deg);
          }
        }
        .icon-up{
          transform: rotate(180deg);
        }
      }
    }
    .item-detail{
      border-top: 1px solid #D7D7D7;
      padding-top: 47px;
      padding-left: 130px;
      font-size: 14px;
      margin-top: 45px;
      .item{
        margin-bottom:19px;
        .detail-title{
          float:left;
          width:100px;
        }
        .detail-info{
          display:inline-block;
          img{
            width: 30px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .item-pay{
    padding:26px 50px 72px;
    background-color:#ffffff;
    color: #333333;
    h3{
      font-size: 20px;
      font-weight: 200;
      color: #333333;
      padding-bottom: 24px;
      border-bottom: 1px solid #D7D7D7;
      margin-bottom: 26px;
    }
    .pay-way{
      font-size:18px;
      .pay{
        display:inline-block;
        width:188px;
        height:64px;
        border:1px solid #D7D7D7;
        cursor:pointer;
        &:last-child{
          margin-left:20px;
        }
        &.checked{
          border:1px solid #FF6700;
        }
      }
      .pay-ali{
        background:url('/img/pay/icon-ali.png') no-repeat center;
        background-size:103px 38px;
        margin-top:19px;
      }
      .pay-wechat{
        background:url('/img/pay/icon-wechat.png') no-repeat center;
        background-size:103px 38px;
      }
    }
  }
}
</style>